<template>
  <div class="bind-m-wrapper">
    <div style="height: 10%"></div>
    <div class="mandatory-pic">
      <div><img src="/web-hft-ee/static/img/binding_cellphone.png"></div>
    </div>
    <div class="tips">为了方便您的在线学习，请绑定手机号码</div>
    <div :class="isMobile?'fill_in_the_area':'fill_in_the_area_pc'">
      <input @keyup="mobileFilter"
             autocomplete
             maxlength="11"
             placeholder="请输入手机号码"
             v-model="mobile"
      />
      <div class="bind-m-wrapper_input">
        <input
          maxlength=6
          placeholder="请输入验证码"
          v-model="authCode"/>
        <!--suppress JSUnresolvedFunction -->
        <p @click="getAuthCode({mobile})" id="auth">{{btnAuth}}</p>
      </div>
      <div class="promptly">
        <div @click="immediate_bind">立即绑定</div>
      </div>
    </div>

  </div>
</template>

<script>
  import {Toast} from 'vant'
  import ApplyAPI from "../../../repo/api/applyAPI";
  import {userTypes} from "../../../repo/store/user";
  import UserAPI from "../../../repo/api/UserAPI";
  import {isMobile} from '../../../utils/util'
  import {getCookie} from "as-common";
  import {LoginType} from "../../../repo/env/Constants";

  export default {
    name: 'VantOverLayCommon',
    props: ['show'],

    data() {
      return {
        authState: 'init',
        authTips: '获取验证码',
        countdown: 0,
        countdownHandler: undefined,

        mobile: '',
        authCode: '',
      }
    },
    computed: {
      btnAuth() {
        let authState = this.authState
        if (authState === 'init') {
          return '获取验证码'
        }
        if (authState === 'retry') {
          return '重新获取'
        } else {
          return `${this.countdown}s`
        }
      },
      isMobile() {
        return isMobile()
      }
    },
    watch: {
      authState(nVal) {
        if (nVal === 'counting') {
          this.startCountdown()
        } else {
          this.stopCountdown()
        }
      }
    },
    created() {
      this.authState = 'init'
    },
    destroyed() {
      this.stopCountdown()
    },
    methods: {
      _hasErrorMobile(mobile) {
        return !(mobile && mobile.length === 11 && mobile.startsWith('1'))
      },
      _hasErrorAuthCode(authCode) {
        return !(authCode && authCode.length >= 6)
      },
      getAuthCode() {
        if (this.authState === 'counting') return
        if (this._hasErrorMobile(this.mobile)) {
          return Toast('请输入正确的手机号码')
        }
        /* 设置setAuthState开始计数 */
        this.authState = 'counting'

        return UserAPI.getAuthCode(this.mobile)
          .then(_ => {
            Toast('发送成功')
          })
      },
      startCountdown() {
        if (this.countdown > 0) return
        if (this.countdownHandler) return
        this.countdown = 60
        this.countdownHandler = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown = this.countdown - 1
          } else {
            this.authState = 'retry'
            clearInterval(this.countdownHandler)//清除定时器
            this.countdownHandler = null
          }
        }, 1000) //1秒执行一次
      },
      stopCountdown() {
        clearInterval(this.countdownHandler)
        this.countdownHandler = null
      },
      mobileFilter() {
        this.mobile = this.mobile.replace(/[^\d]/g, '')
      },
      immediate_bind() {
        if (this._hasErrorMobile(this.mobile)) {
          return Toast('请输入正确的手机号码')
        }
        if (this._hasErrorAuthCode(this.authCode)) {
          return Toast('请输入正确的验证码')
        }

        ApplyAPI.editUser(this.mobile, this.authCode).then((result) => {
          UserAPI.getUserInfo().then((result) => {
            this.$store.commit(userTypes.SAVE_USER_INFO, result.responseData);
            setTimeout(() => {
              let loginPath = getCookie(LoginType.jumpAfterLogin, true);

              console.log(loginPath,'loginPath')
              if (loginPath.name === 'inviteShare') {
                this.$router.push({path: loginPath.fullPath});
              } else {
                this.$router.push('/');
              }

            }, 500)
          }).catch((e)=>{
            console.log('getUserInfo',e)
          })
        }).catch((e) => {
          Toast(e.result.errorInfo)
        })
      },

    }

  }
</script>

<style scoped>
  .bind-m-wrapper {
    height: 100vh;
    background: white;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .mandatory-pic {
    display: flex;
    justify-content: center;
  }

  .mandatory-pic img {
    width: 150px;
  }


  .bind-m-wrapper-title {
    font-weight: bold;
    font-size: 20px;
  }

  .bind-m-wrapper input {
    height: 48px;
    background: #F7F7F7;
    color: #999999;
    border-radius: 2px;
    width: 100%;
    margin: 24px auto 0px auto;
    text-indent: 16px;
  }

  .bind-m-wrapper_input {
    position: relative;
  }

  #auth {
    position: absolute;
    top: 54%;
    right: 10px;
    font-size: 14px;
    color: #1DA1F2;
  }

  .control_panel > div {
    margin-left: 40px;
    margin-top: 24px;
  }

  .control_panel > div:nth-of-type(2) {
    color: #1DA1F2;
  }

  .promptly {
    background: #1DA1F2;
    color: white;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    height: 38px;
    margin-top: 28px;
  }

  .tips {
    display: flex;
    justify-content: center;
    font-weight: bold;
    margin: 24px 0px 20px 0px;
  }

  .fill_in_the_area {
    width: 90%;
    margin: 0 auto;
  }

  .fill_in_the_area_pc {
    width: 20%;
    margin: 0 auto;
  }
</style>
